// ::-webkit-scrollbar {
//     width: 5px;
//     height: 5px;
//     position: absolute
// }

// ::-webkit-scrollbar-thumb {
//     background-color: #5bc0de
// }

// ::-webkit-scrollbar-track {
//     background-color: #ddd
// }

.bg_wrap {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000d4a url(./images/bg.jpg) center top;
    background-size: cover;

    width: 100vw;
    height: 100vh;
    overflow: hidden;

    position: relative;
    z-index: -1;
    
}


.canv_wrap {
    opacity: .2;
    cursor: move;
}

.mainbox {
    position: absolute;
    top: 37%;
    left: 35%;
}

.mainbox>ul {}

.mainbox>ul>li {
    float: left;
    padding: 0 .1rem
}

.mainbox>ul>li {
    width: 30%
}

.mainbox>ul>li:nth-child(2) {
    width: 40%;
    padding: 0
}

.map {
    position: relative;
    height: 30vw;
    width: 30vw;
    z-index: 9;
}

.map1,
.map2,
.map3 {
    position: absolute;
    opacity: .5;
}

.map1 {
    width: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    animation: myfirst2 15s infinite linear;
}

.map2 {
    width: 87%;
    top: 6.5%;
    left: 6.5%;
    z-index: 3;
    opacity: 0.2;
    animation: myfirst 10s infinite linear;
}

.map3 {
    width: 80%;
    top: 10%;
    left: 10%;
    z-index: 1;
}

@keyframes myfirst2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

@keyframes myfirst {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-359deg);
    }
}